<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人作品集</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="top-nav">
        <div class="nav-content">
            <div class="logo">我的作品集</div>
            <ul class="nav-links">
                <li><a href="#about">👤 关于我</a></li>
                <li><a href="#works">🎨 作品</a></li>
                <li><a href="#contact">📧 联系方式</a></li>
            </ul>
            <div class="language-switch">
                <button class="lang-switch active" data-lang="zh">中文</button>
                <button class="lang-switch" data-lang="en">EN</button>
            </div>
            <div class="theme-switch">
                <button class="theme-toggle" id="theme-toggle" title="切换主题">
                    <span class="theme-icon">🌙</span>
                </button>
            </div>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <header class="hero">
        <div class="container">
            <h1>你好，我是<span id="name">设计师/开发者</span></h1>
            <p>欢迎访问我的个人作品集网站</p>
            <a href="#works" class="btn">查看我的作品</a>
        </div>
    </header>

    <!-- 关于我 -->
    <section id="about" class="about">
        <div class="container">
            <h2>关于我</h2>
            <div class="about-content">
                <div class="about-image">
                    <img src="https://kirineko.github.io/hita.png" alt="个人头像">
                </div>
                <div class="about-text">
                    <h3>Python Developer</h3>
                    <p>我是一名专注于消息中间件、实时数据处理和高可用架构设计的Python开发者。拥有丰富的大规模系统开发经验，擅长构建高性能、可扩展的后端服务。</p>
                    <p>在技术之外，我喜欢Rust编程语言，热爱动漫文化，特别喜欢《幸运星》、《孤独摇滚》和《摇曳露营》等作品。我相信技术与艺术的结合能够创造出更好的产品。</p>
                    
                    <!-- 技能标签 -->
                    <div class="skills-section">
                        <h4>技能专长</h4>
                        <div class="skills-tags">
                            <span class="skill-tag expert">Python</span>
                            <span class="skill-tag expert">MongoDB</span>
                            <span class="skill-tag proficient">Next.js</span>
                            <span class="skill-tag proficient">ElasticSearch</span>
                            <span class="skill-tag beginner">Rust</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 专业经历时间线 -->
            <div class="timeline-section">
                <h4>专业经历</h4>
                <div class="timeline">
                    <div class="timeline-item">
                        <div class="timeline-date">2010-2014</div>
                        <div class="timeline-content">
                            <h5>清华大学</h5>
                            <p>计算机科学与技术专业 · 本科</p>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-date">2014-2016</div>
                        <div class="timeline-content">
                            <h5>斯坦福大学</h5>
                            <p>计算机科学专业 · 硕士</p>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-date">2017-2020</div>
                        <div class="timeline-content">
                            <h5>Google</h5>
                            <p>软件工程师 · 负责分布式系统开发</p>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-date">2021-2023</div>
                        <div class="timeline-content">
                            <h5>OpenAI</h5>
                            <p>软件工程师 · AI基础设施开发</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 个人成就 -->
            <div class="achievements-section">
                <h4>个人成就</h4>
                <div class="achievements-grid">
                    <div class="achievement-item">
                        <div class="achievement-icon">🎓</div>
                        <h5>清华大学优秀毕业生</h5>
                        <p>2014年度优秀毕业生</p>
                    </div>
                    <div class="achievement-item">
                        <div class="achievement-icon">🏆</div>
                        <h5>微软MVP</h5>
                        <p>Microsoft Most Valuable Professional</p>
                    </div>
                    <div class="achievement-item">
                        <div class="achievement-icon">🛡️</div>
                        <h5>华为开发者认证</h5>
                        <p>高级软件工程师认证</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 作品展示 -->
    <section id="works" class="works">
        <div class="container">
            <h2>我的作品</h2>
            <div class="works-grid">
                <!-- 作品项 1 -->
                <div class="work-item">
                    <img src="https://images.unsplash.com/photo-1558655146-d09347e92766?w=600&h=400&fit=crop" alt="电商平台UI设计">
                    <div class="work-info">
                        <h3>现代电商平台UI设计</h3>
                        <p>为时尚品牌打造的全新电商平台界面，采用简洁现代的设计风格，优化用户购物体验。项目包含完整的用户流程设计、响应式布局以及品牌视觉识别系统。</p>
                    </div>
                </div>
                <!-- 作品项 2 -->
                <div class="work-item">
                    <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&h=400&fit=crop" alt="企业官网开发">
                    <div class="work-info">
                        <h3>科技企业官网开发</h3>
                        <p>为科技创新公司开发的官方网站，采用React框架构建，实现了流畅的动画效果、完善的内容管理系统以及SEO优化，大幅提升了网站的访问量和转化率。</p>
                    </div>
                </div>
                <!-- 作品项 3 -->
                <div class="work-item">
                    <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=400&fit=crop" alt="移动应用界面">
                    <div class="work-info">
                        <h3>健康管理移动应用</h3>
                        <p>设计并开发的健康追踪移动应用，包含运动记录、饮食管理、健康数据分析等功能。采用Material Design设计原则，界面直观易用，深受用户好评。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系方式 -->
    <section id="contact" class="contact">
        <div class="container">
            <h2>与我联系</h2>
            <p style="text-align: center; font-size: 1.1rem; color: #666; margin-bottom: 40px;">有任何问题或合作意向，欢迎通过以下方式联系我</p>
            <div class="contact-content">
                <form id="contact-form">
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="email" id="email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="message">留言</label>
                        <textarea id="message" name="message" rows="5" required></textarea>
                    </div>
                    <button type="submit" class="btn">
                        <span>发送消息</span>
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <line x1="22" y1="2" x2="11" y2="13"></line>
                            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                        </svg>
                    </button>
                </form>
                <div class="contact-info">
                    <div class="info-item">
                        <div class="info-icon">📧</div>
                        <div class="info-text">
                            <h4>邮箱</h4>
                            <p>yjd_neko@qq.com</p>
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="info-icon">🌐</div>
                        <div class="info-text">
                            <h4>个人网页</h4>
                            <p><a href="https://kirineko.github.io" target="_blank" style="color: #667eea; text-decoration: none;">kirineko.github.io</a></p>
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="info-icon">📍</div>
                        <div class="info-text">
                            <h4>地址</h4>
                            <p>中国 北京</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <p>&copy; 2023 个人作品集. 保留所有权利.</p>
            <div class="social-links">
                <a href="https://kirineko.github.io" target="_blank">个人网页</a>
                <a href="mailto:yjd_neko@qq.com">邮箱</a>
                <a href="#contact">联系方式</a>
            </div>
        </div>
    </footer>

    <script src="languages.js"></script>
    <script src="main.js"></script>
</body>
</html>